<div class="filter-bar">
    <sdc-filter-bar
            [placeHolder]="'Search...'"
            [testId]="'search-env-param-name'"
            (keyup)="updateFilter($event)">
    </sdc-filter-bar>
</div>

<ngx-datatable
        class='material'
        [rows]='artifact.heatParameters'
        [columnMode]="'flex'"
        [headerHeight]="40"
        [rowHeight]="'auto'"
        [scrollbarV]="false">

    <ngx-datatable-column name="Parameter" [flexGrow]="2">
        <ng-template let-row="row" ngx-datatable-cell-template prop="name">
            {{row.name}}
            <span *ngIf="row.description.length > 0" class="info">
                <svg-icon [name]="'comment'" (click)="openPopOver('',row.description,{x:$event.pageX , y:$event.pageY },'bottom')"></svg-icon>
            </span>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="DefaultValue"[flexGrow]="1">
        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            {{row.defaultValue}}
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="CurrentValue" [flexGrow]="2">
        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            <sdc-input class="sdc-input-wrapper" #numberValidator
                [placeHolder]="'Enter text'"
                [isViewMode]="isViewOnly"
                [size]="'medium'"
                [(value)]=row.currentValue
                [isIconClickable]="true"
                (onRighIconClicked)="clearCurrentValue(row.name)"
                [righIconName]="'trash-o'"
                [testId] = "'value-field-of-' + row.name">
            </sdc-input>

            <sdc-validation [validateElement]="numberValidator" (validityChanged)="onValidityChange($event)" [disabled]="false" [testId]="_testId">
                <sdc-regex-validator *ngIf="displayRegexValid && row.type == 'number' && row.currentValue !== null" [message]="'Value should be of type number.'" [pattern]="displayRegexValid" [disabled]="false"></sdc-regex-validator>
            </sdc-validation>
        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

<div *ngIf="isInstanceSelected" class="artifactTimeout">

    <sdc-number-input
               label="Deployment Timeout ({{minDeploymentTimeout}}-{{maxDeploymentTimeout}} minutes)"
               [required]="true"
               [disabled]="false"
               name="artifactTimeout"
               testId="deploymentTimeout"
               value="{{artifact.timeout}}"
               [maxValue]="maxDeploymentTimeout"
               [minValue]="minDeploymentTimeout"
               (valueChange)="timeoutChanged($event)"
               [isViewMode]="isViewOnly"
               [step]="1"
               >

    </sdc-number-input>

</div>